<template>
  <div class="shop_buys">
    <!-- Navigation Bar导航条 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 商品 -->
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
        <van-card :title="item.title" :desc="item.desc" :num="item.num" :price="formatPrice(item.price)"
          :thumb="item.thumb" />
      </van-checkbox>
    </van-checkbox-group>

    <!-- SubmitBar 提交订单栏 -->
    <van-submit-bar :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="onSubmit" class="my_submitbar">
      <van-checkbox v-model="checked" @click="toggleAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o" name="shop-home" replace to="shop-home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" name="shop-class" replace to="shop-class">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" name="shop-buys" replace to="shop-buys">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" name="shop-ours" replace to="shop-ours">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import { ref } from 'vue';
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
// 手动引入 Toast 组件的样式
import 'vant/es/toast/style';

export default {
  setup() {
    // Navigation Bar导航条 - 返回
    const onClickLeft = () => history.back();
    // Tabbar 标签栏 - 选中购物车
    const active = ref('shop-buys');
    // Toast 轻提示 - 点击结算
    const onSubmit = () => Toast('没有下一步了');
     // Toast 轻提示 - 修改地址
    const onClickLink = () => Toast('修改地址');
    // Checkbox 复选框 - 选中
    const checked = ref(true);

    return {
      onClickLeft,
      active,
      onSubmit,
      onClickLink,
      checked,
    };
  },
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [SubmitBar.name]: SubmitBar,
    [CheckboxGroup.name]: CheckboxGroup,
  },

  data() {
    return {
      checkedGoods: ['1', '2', '3'],
      goods: [{
        id: '1',
        title: '进口香蕉',
        desc: '约250g，2根',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
      }, {
        id: '2',
        title: '陕西蜜梨',
        desc: '约600g',
        price: 690,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
      }, {
        id: '3',
        title: '美国伽力果',
        desc: '约680g/3个',
        price: 2680,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
      }]
    };
  },

  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '结算' + (count ? `(${count})` : '');
    },

    totalPrice() {
      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
    }
  },

  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
  }

};

</script>

<style lang="less">
/* SubmitBar 提交订单栏 */
.my_submitbar .van-submit-bar__tip span{
  color: var(--van-blue);
}
.van-submit-bar{
  bottom: var(--van-tabbar-height);
}
/* ./SubmitBar 提交订单栏 end here */

.card-goods {
  padding: 10px 0;
  background-color: #fff;

  &__item {
    position: relative;
    background-color: #fafafa;

    .van-checkbox__label {
      width: 100%;
      height: auto; // temp
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }

    .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }

    .van-card__price {
      color: #f44;
    }
  }
}
</style>